<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/plugins/jquery/jquery.min.js"></script>

<head>
    <%@include file="head.jsp"%>
    <title>商品详情页</title>

    <link rel="stylesheet" type="text/css" href="/static/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/pages-item.css" />
<%--    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/pages-zoom.css" />--%>
    <link rel="stylesheet" type="text/css" href="/static/css/widget-cartPanelView.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/normalize.css" />
    <link href="/static/css/jquery.exzoom.css" rel="stylesheet" type="text/css"/>
    <style>
        #exzoom {
            float: left;
            width: 400px;
            /*height: 400px;*/
            margin: 20px auto;
            /*width: 400px;*/
            /*margin-top: 15px;*/
            /*margin-bottom: 10px;*/
        }
    </style>
</head>
<body>
<style>
    .alert {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        min-width: 200px;
        margin-left: -100px;
        z-index: 99999;
        padding: 15px;
        border: 1px solid transparent;
        border-radius: 4px;
    }

    .alert-success {
        color: #3c763d;
        background-color: #dff0d8;
        border-color: #d6e9c6;
    }

    .alert-info {
        color: #31708f;
        background-color: #d9edf7;
        border-color: #bce8f1;
    }

    .alert-warning {
        color: #8a6d3b;
        background-color: #fcf8e3;
        border-color: #faebcc;
    }

    .alert-danger {
        color: #a94442;
        background-color: #f2dede;
        border-color: #ebccd1;
    }
</style>
<div class="alert"></div>
<!--页面顶部-->
<%@include file="../system/header.jsp"%>

<!--页面顶部结束-->

<div class="py-container">
    <div class="exzoom" id="exzoom">
        <!--大图区域-->
        <div class="exzoom_img_box">
            <ul class='exzoom_img_ul'>
                <li><img src="${goods.image1}"/></li>
                <li><img src="${goods.image2}"/></li>
                <li><img src="${goods.image3}"/></li>
                <li><img src="${goods.image4}"/></li>
                <li><img src="${goods.image5}"/></li>
            </ul>
        </div>
        <!--缩略图导航-->
        <div class="exzoom_nav"></div>
        <!--控制按钮-->
        <p class="exzoom_btn">
            <a href="javascript:void(0);" class="exzoom_prev_btn"> &lt; </a>
            <a href="javascript:void(0);" class="exzoom_next_btn"> &gt; </a>
        </p>
    </div>
    <div id="item">
        <div class="crumb-wrap">
        </div>
        <!--product-info-->
        <div class="product-info">

            <div class="fr itemInfo-wrap">
                <div class="sku-name">
                    <h3>${goods.goods_name}</h3>
                </div>
                <div class="news"><span></span></div>
                <div class="summary">
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>价　　格</i>
                        </div>
                        <div class="fl price">
                            <i>¥</i>
                            <em>${goods.goods_price}</em>
                            <span>降价通知</span>
                        </div>
                        <div class="fr remark">
                            <i>累计评价</i><em>67373</em>
                        </div>
                    </div>
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>促　　销</i>
                        </div>
                        <div class="fl fix-width">
                            <i class="red-bg">暂无促销活动</i>
                            <em class="t-gray"></em>
                        </div>
                    </div>
                </div>
                <div class="support">
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>支　　持</i>
                        </div>
                        <div class="fl fix-width">
                            <em class="t-gray">以旧换新 礼品购</em>
                        </div>
                    </div>
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>库    存</i>
                        </div>
                        <div class="fl fix-width">
                            <em class="t-gray">${goods.goods_number}</em>
                        </div>
                    </div>
                    <div class="summary-wrap">
                        <div class="fl title">

                        </div>
                        <div class="fl fix-width">
                            <em class="t-gray"></em>
                        </div>
                    </div>
                </div>
                <div class="clearfix choose">
                    <div id="specification" class="summary-wrap clearfix">
                        <div class="fl">
                            <ul class="btn-choose unstyled">
                                <c:if test="${goods.goods_number != 0}">
                                <li>
                                    <a href="${pageContext.request.contextPath}/goods/addCart?userName=${Username}&goods_id=${goods.goods_id}" target="_blank" class="sui-btn  btn-danger addshopcar">加入购物车</a>
                                </li>
                                </c:if>
                                <c:if test="${goods.goods_number == 0}">
                                    <li>
                                        <a href="" target="" class="sui-btn  btn-danger addshopcar">无货</a>
                                    </li>
                                </c:if>
                            </ul>
                        </div>
                        <div class="fl" style="">
                            <ul class="btn-choose unstyled">
                                <li>
                                    <a href="${pageContext.request.contextPath}/goods/toCollect?username=${Username}&currentPage=1"  class="sui-btn" style="background: yellowgreen;font-size: 16px;padding: 10px 25px;color: white" id="star">加入收藏<input class="id" hidden value="${goods.goods_id}">
<%--                                    <a href="#"  class="sui-btn" style="background: yellowgreen;font-size: 16px;padding: 10px 25px;color: white" id="star">加入收藏<input class="id" hidden value="${goods.goods_id}">--%>
                                        <input class="username" hidden value="${Username}"></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--product-detail-->
        <div class="clearfix product-detail">
            <div class="fl aside">
                <ul class="sui-nav nav-tabs tab-wraped">
                    <li class="active">
                        <a href="#index" data-toggle="tab">
                            <span>为你推荐</span>
                        </a>
                    </li>
                    <li>
                        <a href="#profile" data-toggle="tab">
                            <span>推荐品牌</span>
                        </a>
                    </li>
                </ul>
                <div class="tab-content tab-wraped">
                    <div id="index" class="tab-pane active">
                        <ul class="goods-list unstyled">
                            <li>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="/static/img/_/part01.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="/static/img/_/part02.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="/static/img/_/part03.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="/static/img/_/part02.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="${pageContext.request.contextPath}/static/img/_/part03.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div id="profile" class="tab-pane">
                        <p>推荐品牌</p>
                    </div>
                </div>
            </div>
            <div class="fr detail">
                <div class="clearfix fitting">
                    <h4 class="kt">商品详情</h4>
                </div>
                <div style="width: 980px">
                    <img class="" src=${goods.goods_introduce} mode="aspectFit" />
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        var username = '${Username}';
        if(username === ''){
            $("#showUsername").html("请<a href=\"${pageContext.request.contextPath}/system/login\">登录</a>\n" +
                "                            <span><a href=\"${pageContext.request.contextPath}/system/register\">免费注册</a></span>")
        }else{
            $("#showUsername").html(""+username+" <a href='${pageContext.request.contextPath}/login/logout'>退出登录</a>");
        }
        $("#star").click(function () {
            var goods_id = $(".id").val();
            var username = $(".username").val();
            $.ajax({
                url:'${pageContext.request.contextPath}/goods/collectGoods?goods_id='+goods_id+'&username='+username+'',
                type:'GET',
                dataType:'json',
                success:function (res) {
                    $('.alert').html(res.msg);
                }
            })
        });
    });
</script>
<script type="text/javascript">
    $(function(){
        $("#service").hover(function(){
            $(".service").show();
        },function(){
            $(".service").hide();
        });
        $("#shopcar").hover(function(){
            $("#shopcarlist").show();
        },function(){
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="/static/js/model/cartModel.js"></script>
<script type="text/javascript" src="/static/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/static/js/plugins/sui/sui.min.js"></script>
<script src="/static/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="/static/js/jquery.exzoom.js"></script>
<script type="text/javascript">
    $("#exzoom").exzoom({
        autoPlay: false,
    });//方法调用，务必在加载完后执行
</script>
<%--<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>--%>
<%--<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/plugins/jquery.jqzoom/zoom.js"></script>--%>
<%--<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/pages/index.js"></script>--%>

<!--页面底部-->
<%@include file="../system/Footer.jsp"%>
<!--页面底部END-->

<!--页面底部  结束 -->
</body>
</html>